<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'binsave.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style type="text/css">
	table{
		margin-top:3%;
		width:80%;
		height:80%;
		border-collapse:collapse;
	}
	tr td {
		border-bottom: solid 1px #696969;
	}
	.bin_td1{
		text-align: right;
		font-size: 13px;
		font-weight: 800;
	}
	input{
		width:90%;
		border: none;
		outline:none;
		background-color: #DCDCDC;
	}
	select {
		width:50%;
		border: none;
		outline:none;
		background-color: #DCDCDC;
		margin-left: 10%;
	}
	#binbounced_bottom{
		height: 10%;
		margin-top: 2%;
		
	}
	#binbounced_bottom button{
		float: right;
	}
	#button1{
		margin-right:8.5%;
		padding:0.5% 2%;	
	}
	#button2{
		margin-right:3%;
		padding:0.8% 3%;	
	}
</style>

<script type="text/javascript">
function load(){
	
}
function mouseout(){
	var obj = document.getElementById("areasel"); //定位id
	
	var index = obj.selectedIndex; // 选中索引
	var val = obj.options[index].value; // 选中值
	if(val==1){
		document.getElementById("areaimg").src="";
	}
}

</script>

  </head>
  <body onload="load()">
    <table>
    	<tr>
    		<td class="bin_td1">所属区域:</td>
    		<td colspan = "2"><select id="areasel" onmouseout="mouseout()">
    			<option>请选择</option>
    			<c:forEach items="${requestScope.areas }" var="area">
    				<option value="${area.id}">${area.areaName}</option>
    			</c:forEach>
    		</select></td>
    		<td><img id="areaimg" alt="区域图片" src=""/></td>
    	</tr>
    	<tr>
    		<td class="bin_td1">验证接口:</td>
    		<td colspan = "3"><input type="text" value=""/></td>
    	</tr>
    	<tr>
    		<td class="bin_td1">上网速率:</td>
    		<td colspan = "2"><select>
    			<option>请选择</option>
    			<option>4兆</option>
    			<option>8兆</option>
    		</select></td>
    		<td></td>
    	</tr>
    	<tr>
    		<td class="bin_td1">绑定名提示:</td>
    		<td><input type="text" value=""/></td>
    		<td class="bin_td1">绑定密码提示:</td>
    		<td><input type="text" value=""/></td>
    	</tr>
    </table>
    <div id="binbounced_bottom">
    	<button id="button1">清空</button>
    	<button id="button2">保 存</button>
    	<div style="clear: both;"></div>
    </div>
  </body>
</html>

